<template>
    <div>
        <el-tabs type="border-card" v-model="query.stype" @tab-click="change">
            <el-tab-pane label="全部" :name="0">
                <div class="view flex-row autoH" >
                    <div class="container m-r-15 " :class="collapse ? 'w300': 'width100'">
                        <div class="view flex-row align-center justify-between">
                            <div class="handle-box">
                                <el-input v-model="query.search" placeholder="用户名" class="handle-input mr10"></el-input>
                                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                            </div>

                            <div class="collapse-btn1 m-b-15" @click="collapseChage">
                                <i v-if="!collapse" class="el-icon-s-fold fz-24"></i>
                                <i v-else class="el-icon-s-unfold fz-24"></i>
                            </div>
                        </div>
                        <el-table
                            :data="tableData"
                            class="table"
                            :row-style="{cursor: 'pointer'}"
                            :height="autoH"
                            stripe
                            @row-click="handleSelect"
                            highlight-current-row
                            ref="multipleTable"
                            header-cell-class-name="table-header"

                        >
                            <el-table-column  prop="username" label="账号"></el-table-column>
                            <el-table-column  label="名称" prop="nickname">
                                
                            </el-table-column>
                            <el-table-column sortable prop="equity"  label="用户权益" align="center">
                                
                            </el-table-column>
                            <el-table-column  sortable prop="sumstartdeposit" label="期初结存"></el-table-column>
                            <el-table-column sortable  label="浮动盈亏" align="center" prop="floatyk">
                                    <template #default="{ row }">
                                        <div :class="row.floatyk > 0 ? 'c_red':'c_green'">
                                            {{ row.floatyk }}
                                        </div>
                                    </template>
                            </el-table-column>

                            <el-table-column sortable  prop="dayyk" label="平仓盈亏" align="center">
                                     <template #default="{ row }">
                                        <div :class="row.dayyk > 0 ? 'c_red':'c_green'">
                                            {{ row.dayyk }}
                                        </div>
                                    </template>
                            </el-table-column>
                            <el-table-column  prop="riskpro" label="风险度" align="center">
                                <template #default="{ row }">
                                        <div>
                                            {{ row.riskpro + '%' }}
                                        </div>
                                </template>
                            </el-table-column>

                            <el-table-column sortable  prop="margin" label="保证金占用"></el-table-column>


                            <el-table-column  prop="feeall" label="手续费"></el-table-column>

                            <el-table-column  prop="ordernum" label="持仓量" align="center"></el-table-column>

                            <el-table-column
                            show-overflow-tooltip
                            fixed="right"
                            align="center"
                            label="操作"
                            width="180"
                        >
                            <template #default="{ row }">
                                <el-button type="text" @click.stop="jiesuan1(row)">
                                    结算单
                                </el-button>

                                <el-button type="text" @click.stop="joinZDY(row)" >
                                    加入自定义
                                </el-button>
                            </template>
                        </el-table-column>

                        </el-table>
                    </div>
                    <splitPanel :ref="`splitPanel0`"/>
                </div>
                
            </el-tab-pane>
            <el-tab-pane label="预警" :name="1">
                <div class="view flex-row autoH" >
                     <div class="container m-r-15 w300" :class="collapse ? 'w300': 'width100'">
                     <div class="view flex-row align-center justify-between">
                         <div class="handle-box">
                            <el-input v-model="query.search" placeholder="用户名" class="handle-input mr10"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        </div>
                        <div class="collapse-btn1 m-b-15" @click="collapseChage">
                            <i v-if="!collapse" class="el-icon-s-fold fz-24"></i>
                            <i v-else class="el-icon-s-unfold fz-24"></i>
                        </div>
                     </div>
                    
                    <el-table
                        :data="tableData"
                        class="table"
                        :row-style="{cursor: 'pointer'}"
                        :height="autoH"
                        stripe
                        @row-click="handleSelect"
                        highlight-current-row
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                       
                    >
                        <el-table-column  prop="username" label="账号"></el-table-column>
                        <el-table-column  label="名称" prop="nickname">
                            
                        </el-table-column>
                        <el-table-column sortable prop="equity"  label="用户权益" align="center">
                            
                        </el-table-column>
                        <el-table-column sortable  prop="sumstartdeposit" label="期初结存"></el-table-column>
                        <el-table-column  sortable label="浮动盈亏" align="center" prop="floatyk">
                                <template #default="{ row }">
                                    <div :class="row.floatyk > 0 ? 'c_red':'c_green'">
                                        {{ row.floatyk }}
                                    </div>
                                </template>
                        </el-table-column>

                        <el-table-column  sortable prop="dayyk" label="平仓盈亏" align="center">
                            <template #default="{ row }">
                                <div :class="row.dayyk > 0 ? 'c_red':'c_green'">
                                    {{ row.dayyk }}
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column sortable prop="riskpro" label="风险度"></el-table-column>

                        <el-table-column sortable prop="margin" label="保证金占用"></el-table-column>


                        <el-table-column  prop="feeall" label="手续费"></el-table-column>

                        <el-table-column  prop="ordernum" label="持仓量"></el-table-column>

                        <el-table-column
                            show-overflow-tooltip
                            fixed="right"
                            align="center"
                            label="操作"
                            width="180"
                        >
                            <template #default="{ row }">
                                <el-button type="text" @click.stop="jiesuan1(row)">
                                    结算单
                                </el-button>

                                <el-button type="text" @click.stop="joinZDY(row)" >
                                    加入自定义
                                </el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
                <splitPanel :ref="`splitPanel1`"/>
                </div>
              
            </el-tab-pane>
            <el-tab-pane label="持仓" :name="2">
                <div class="view flex-row autoH" >
                    <div class="container m-r-15 w300" :class="collapse ? 'w300': 'width100'">
                        <div class="view flex-row align-center justify-between">
                            <div class="handle-box">
                                <el-input v-model="query.search" placeholder="用户名" class="handle-input mr10"></el-input>
                                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                            </div>
                             <div class="collapse-btn1 m-b-15" @click="collapseChage">
                            <i v-if="!collapse" class="el-icon-s-fold fz-24"></i>
                            <i v-else class="el-icon-s-unfold fz-24"></i>
                        </div>
                        </div>
                    
                    <el-table
                        :data="tableData"
                        class="table"
                        :row-style="{cursor: 'pointer'}"
                        :height="autoH"
                        @row-click="handleSelect"
                        highlight-current-row
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                       
                    >
                        <el-table-column  prop="username" label="账号"></el-table-column>
                        <el-table-column  label="名称" prop="nickname">
                            
                        </el-table-column>
                        <el-table-column sortable prop="equity"  label="用户权益" align="center">
                            
                        </el-table-column>
                        <el-table-column sortable prop="sumstartdeposit" label="期初结存"></el-table-column>
                        <el-table-column sortable label="浮动盈亏" align="center" prop="floatyk">
                                 <template #default="{ row }">
                                    <div :class="row.floatyk > 0 ? 'c_red':'c_green'">
                                        {{ row.floatyk }}
                                    </div>
                                </template>
                        </el-table-column>
                        <el-table-column  prop="dayyk" label="平仓盈亏" align="center" sortable>

                                <template #default="{ row }">
                                <div :class="row.dayyk > 0 ? 'c_red':'c_green'">
                                    {{ row.dayyk }}
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column sortable prop="riskpro" label="风险度"></el-table-column>

                        <el-table-column sortable prop="margin" label="保证金占用"></el-table-column>


                        <el-table-column  prop="feeall" label="手续费"></el-table-column>

                        <el-table-column  prop="ordernum" label="持仓量"></el-table-column>

                        <el-table-column
                            show-overflow-tooltip
                            fixed="right"
                            align="center"
                            label="操作"
                            width="180"
                        >
                            <template #default="{ row }">
                                <el-button type="text" @click.stop="jiesuan1(row)">
                                    结算单
                                </el-button>

                                <el-button type="text" @click.stop="joinZDY(row)" >
                                    加入自定义
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <splitPanel :ref="`splitPanel2`"/>
                </div>
            </el-tab-pane>


            <el-tab-pane label="在线" :name="3">
                 <div class="view flex-row autoH" >
                     <div class="container m-r-15 w300" :class="collapse ? 'w300': 'width100'">
                        <div class="view flex-row align-center justify-between">
                            <div class="handle-box">
                                <el-input v-model="query.search" placeholder="用户名" class="handle-input mr10"></el-input>
                                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                            </div>
                            <div class="collapse-btn1 m-b-15" @click="collapseChage">
                                <i v-if="!collapse" class="el-icon-s-fold fz-24"></i>
                                <i v-else class="el-icon-s-unfold fz-24"></i>
                            </div>
                        </div>
                        <el-table
                            :data="tableData"
                            class="table"
                            :row-style="{cursor: 'pointer'}"
                            :height="autoH"
                            @row-click="handleSelect"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                        
                        >
                            <el-table-column  prop="username" label="账号"></el-table-column>
                            <el-table-column  label="名称" prop="nickname">
                                
                            </el-table-column>
                            <el-table-column sortable prop="equity"  label="用户权益" align="center">
                                
                            </el-table-column>
                            <el-table-column sortable prop="sumstartdeposit" label="期初结存"></el-table-column>

                            <el-table-column sortable label="浮动盈亏" align="center" prop="floatyk">
                                <template #default="{ row }">
                                    <div :class="row.floatyk > 0 ? 'c_red':'c_green'">
                                        {{ row.floatyk }}
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column sortable prop="dayyk" label="平仓盈亏" align="center">
                                <template #default="{ row }">
                                    <div :class="row.dayyk > 0 ? 'c_red':'c_green'">
                                        {{ row.dayyk }}
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column sortable prop="riskpro" label="风险度"></el-table-column>

                            <el-table-column sortable prop="margin" label="保证金占用"></el-table-column>


                            <el-table-column  prop="feeall" label="手续费"></el-table-column>

                            <el-table-column  prop="ordernum" label="持仓量"></el-table-column>

                            <el-table-column
                            show-overflow-tooltip
                            fixed="right"
                            align="center"
                            label="操作"
                            width="180"
                        >
                            <template #default="{ row }">
                                <el-button type="text" @click.stop="jiesuan1(row)">
                                    结算单
                                </el-button>

                                <el-button type="text" @click.stop="joinZDY(row)" >
                                    加入自定义
                                </el-button>
                            </template>
                        </el-table-column>
                        </el-table>
                    </div>
                    <splitPanel :ref="`splitPanel3`" @fetch-data="getData"/>
                 </div>
                
            </el-tab-pane>

            <el-tab-pane label="自定义" :name="4">
                 <div class="view flex-row autoH" >
                     <div class="container m-r-15 w300" :class="collapse ? 'w300': 'width100'">
                        <div class="view flex-row align-center justify-between">
                            <div class="handle-box">
                                <el-input v-model="query.search" placeholder="用户名" class="handle-input mr10"></el-input>
                                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                            </div>
                            <div class="collapse-btn1 m-b-15" @click="collapseChage">
                                <i v-if="!collapse" class="el-icon-s-fold fz-24"></i>
                                <i v-else class="el-icon-s-unfold fz-24"></i>
                            </div>
                        </div>
                        <el-table
                            :data="tableData"
                            class="table"
                            :row-style="{cursor: 'pointer'}"
                            :height="autoH"
                            @row-click="handleSelect"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                        
                        >
                            <el-table-column  prop="username" label="账号"></el-table-column>
                            <el-table-column  label="名称" prop="nickname">
                                
                            </el-table-column>
                            <el-table-column sortable prop="equity"  label="用户权益" align="center">
                                
                            </el-table-column>
                            <el-table-column sortable prop="sumstartdeposit" label="期初结存"></el-table-column>

                            <el-table-column sortable label="浮动盈亏" align="center" prop="floatyk">
                                <template #default="{ row }">
                                    <div :class="row.floatyk > 0 ? 'c_red':'c_green'">
                                        {{ row.floatyk }}
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column sortable prop="dayyk" label="平仓盈亏" align="center">
                                <template #default="{ row }">
                                    <div :class="row.dayyk > 0 ? 'c_red':'c_green'">
                                        {{ row.dayyk }}
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column sortable prop="riskpro" label="风险度"></el-table-column>

                            <el-table-column sortable prop="margin" label="保证金占用"></el-table-column>


                            <el-table-column  prop="feeall" label="手续费"></el-table-column>

                            <el-table-column  prop="ordernum" label="持仓量"></el-table-column>

                             <el-table-column
                            show-overflow-tooltip
                            fixed="right"
                            align="center"
                            label="操作"
                            width="180"
                        >
                            <template #default="{ row }">
                                <el-button type="text" @click.stop="jiesuan1(row)">
                                    结算单
                                </el-button>

                                <el-button type="text" @click.stop="delZDY(row)" >
                                    取消自定义
                                </el-button>
                            </template>
                        </el-table-column>
                        </el-table>
                    </div>
                    <splitPanel :ref="`splitPanel4`" @fetch-data="getData"/>
                 </div>
                
            </el-tab-pane>
        </el-tabs>

        <div class="view flex-row alignc-center fz-12 bottom-tip" >
            <div class="m-r-10">共： <span class="c_blue">{{ info.count || 0 }}条</span></div>
            <div class="m-r-10">用户权益：<span >{{ info.sumequity || 0 }}</span></div>
            <div class="m-r-10">期初结存： <span >{{ info.sumstartdeposit|| 0 }}</span></div>
            <div class="m-r-10">浮动盈亏： <span class="c_color" :class="info.sumflootyk > 0 ?'c_red':''">{{ info.sumflootyk || 0}}</span></div>
            <div class="m-r-10">平仓盈亏： <span class="c_color" :class="info.sumdayyk > 0 ?'c_red':''">{{  info.sumdayyk || 0}}</span></div>
            <div class="m-r-10">风险度： <span class="c_color c_red">{{  info.sumrisk || 0}}%</span></div>
        </div>
        <jiesuan ref="jiesuan"/>
    </div>
</template>

<script>
import { jiankong, jiankongCount, addMygroup, delMygroup } from "../api/index";
import splitPanel from './split-panel.vue'
import jiesuan from '@/components/jiesuan'
export default {
    name: "basetable",
    components: {
        splitPanel,
        jiesuan
    },
    data() {
        return {
            collapse: false,
            timer: null,
            query: {
                search: "",
                stype: 0
            },
            info: {},
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            selectItem: null,
            id: -1
        };
    },
    created() {
        this.getData();
        this.timer = setInterval(() => {
            this.getData();
        }, 3000);
    },
    beforeRouteLeave (to, from, next) {
        this.$refs[`splitPanel0`].closePage()
        this.$refs[`splitPanel1`].closePage()
        this.$refs[`splitPanel2`].closePage()
        this.$refs[`splitPanel3`].closePage()
        this.$refs[`splitPanel4`].closePage()
        if (this.timer) {
            clearInterval(this.timer)
        }
        next()    //允许跳转页面
    },
    computed: {
        autoH() {
            return window.innerHeight - 320
        }
    },
    methods: {
        joinZDY(row) {
             addMygroup({uid: row.id}).then( res => {
                    this.getData();
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                })
        },
        delZDY(row) {
            delMygroup({uid: row.id}).then( res => {
                    this.getData();
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                })
        },
        jiesuan1(row) {
            this.$refs.jiesuan.showEdit(row)
        },
        getCount() {
            jiankongCount({stype: this.query.stype,search: this.query.search}).then(res => {
                this.info = res.data
            })
        },
        collapseChage() {
            if (!this.selectItem) {
                this.$message.error('请选择一行')
                return false 
            }
            this.collapse = !this.collapse
            if (this.collapse) {
                this.$refs[`splitPanel${this.query.stype}`].showEdit(this.selectItem)
                this.$refs[`splitPanel0`].closePage()
                this.$refs[`splitPanel1`].closePage()
                this.$refs[`splitPanel2`].closePage()
                this.$refs[`splitPanel3`].closePage()
                this.$refs[`splitPanel4`].closePage()
                this.$refs[`splitPanel${this.query.stype}`].init()
            } else {
                this.$refs[`splitPanel0`].closePage()
                this.$refs[`splitPanel1`].closePage()
                this.$refs[`splitPanel2`].closePage()
                this.$refs[`splitPanel3`].closePage()
                this.$refs[`splitPanel4`].closePage()
               this.$refs[`splitPanel0`].close()
               this.$refs[`splitPanel1`].close()
               this.$refs[`splitPanel2`].close()
               this.$refs[`splitPanel3`].close()
               this.$refs[`splitPanel4`].close()
            }
            
        },
        handleSelect(row) {
            this.selectItem = row
            this.collapse = true
            this.$refs[`splitPanel0`].closePage()
            this.$refs[`splitPanel1`].closePage()
            this.$refs[`splitPanel2`].closePage()
            this.$refs[`splitPanel3`].closePage()
            this.$refs[`splitPanel4`].closePage()
            this.$refs[`splitPanel${this.query.stype}`].init()
            this.$refs[`splitPanel${this.query.stype}`].showEdit(this.selectItem)
           
        },
        change() {
            this.collapse = false
            this.selectItem = null
            this.getData()
        },
        // 获取 easy-mock 的模拟数据
        getData() {
            jiankong(this.query).then(res => {
                this.tableData = res.data;
                this.getCount()
            });
        },
        // 触发搜索按钮
        handleSearch() {
            this.getData();
        },
        // 删除操作
        handleDelete(index) {
            // 二次确认删除
            this.$confirm("确定要删除吗？", "提示", {
                type: "warning"
            })
                .then(() => {
                    this.$message.success("删除成功");
                    this.tableData.splice(index, 1);
                })
                .catch(() => {});
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = "";
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + " ";
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        // 编辑操作
        handleEdit(index, row) {
            this.idx = index;
            this.form = row;
            this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            this.$set(this.tableData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, "pageIndex", val);
            
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.m-r-15 {margin-right: 15px;}
.handle-select {
    width: 120px;
}
.w300 {width: 500px;}
.handle-input {
    width: 300px;
    display: inline-block;
}
.bottom-tip {
    background: #fff;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
}
.table {
    width: 100%;
    font-size: 14px;
}

.el-table td, .el-table th.is-leaf {
    border-bottom: 0;
}
.red {
    color: #ff0000;
}
.c_red {
    color: #ff0000 !important;
}
.c_green {
    color: green !important;
}
.mr10 {
    margin-right: 10px;
}
.autoH {
    height: calc(100vh - 220px);
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.c_blue {
    color: blue;
}
.c_color {
    color: green;
}
.m-r-10 {margin-right: 10px;}
.fz-12 {font-size: 12px !important;}
.width100 {width: 100%;}
.collapse-btn1 {cursor: pointer;}
.m-b-15 {margin-bottom: 15px;}
.fz-24 {font-size: 24px;}
</style>
